<template>
  <div style="padding: 20px">
    <h4 style="margin-bottom: 10px">已发布招聘信息</h4>
    <div style="min-height: 480px">
      <div v-for="(message,index) in messages" :key="message.id" class="msg" @dblclick="openDetail(message)">
        <el-card style="margin-top: 5px">
          <div style="display: flex;justify-content: space-between;padding: 10px">
            <div class="left">
              <div><el-text style="font-size: 22px;font-weight: bolder">{{ message.jobName }}</el-text></div>
              <div style="margin-top: 10px"><el-text size="large">{{
                  message.jobIntroduce.length > 30 ? message.jobIntroduce.substring(0, 30) + "..." : message.jobIntroduce
                }}
              </el-text></div>
              <div style="display: flex;margin-top: 10px;">
                <el-text size="large">职业类型：</el-text>
                <el-tag size="small" style="margin-top: 2px;">{{ message.jobTypeName }}</el-tag>
                <el-text size="large" style="margin-left: 20px;">发布时间：{{ formatTime(message.postTime) }}</el-text>
              </div>
            </div>
            <div class="right">
              <el-text style="color: red;font-weight: bolder;font-size: 20px">{{ message.salary }}</el-text>
            </div>
          </div>
        </el-card>
<!--        <el-divider v-if="index !== messages.length - 1"></el-divider>-->
      </div>
    </div>
    <!--分页组件-->
    <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        style="margin-top: 5px"
    />
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {recruiterApi} from "../../api/app.js"

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
// 已发布职位信息
const messages = ref([]);
// 当前招聘者ID
const hrId = ref(0);

onMounted(() => {
  hrId.value = JSON.parse(localStorage.getItem('recruiter')).id;
  getData();
})

// 格式化时间
const formatTime = (time) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}

const getData = () => {
  recruiterApi.getAllJobByRecruiterId({
    size: pageSize.value,
    page: currentPage.value,
    hrId: hrId.value
  }).then(response => {
    messages.value = response.data;
    total.value = response.total;
  }).catch(error => {
    console.error(error);
  })
}

const router = useRouter();
// 切换至详情页
const openDetail = (message) => {
  router.push({path: '/recruiterMain/selfManage/jobMessageDetail', query: message});
}

// 切换页数
//处理页码变化点击事件
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getData();
};
</script>

<style scoped>
.right {
  display: flex;
  align-items: center;
}
.left{
  display: flex;
  flex-direction: column;
}
.msg :hover {
  background-color: rgb(236, 245, 255);
}
</style>
